<template>
  <div class="tabList2" ref="parent">
    <div class="tabList-title" v-for="(item,index) in dataList" @mouseenter="enter(item)" @mouseleave="leave" @click="handleClick(item)" :key="index">
      <div class="title-item">
        {{item.name}}
      </div>
      <div class="title-item" v-for="item1 in item.dataList">
        {{item1}}
      </div>
      <!-- pop -->
      <div class="chanye-tankuang" v-if="item.allData && showItem">
      <!-- <div class="chanye-tankuang" v-if="item.allData && index==0"> -->
        <p> 名称：</p>
        <div class="chanye-tankuang-text"> {{dataItem[0]}} </div>
        <p> 省份：</p>
        <div class="chanye-tankuang-text"> {{dataItem[1]}} </div>
        <p> 城市：</p>
        <div class="chanye-tankuang-text"> {{dataItem[2]}} </div>
        <p> 竞合关系数：</p>
        <div class="chanye-tankuang-text"> {{dataItem[3]}} </div>
        <p> 产业专利数：</p>
        <div class="chanye-tankuang-text"> {{dataItem[4]}} </div>
        
        <p v-if="dataItem[5]"> 合作关系数：</p>
        <div class="chanye-tankuang-text" v-if="dataItem[5]"> {{dataItem[5]}} </div>
        <p v-if="dataItem[6]"> 产业学研合作数：</p>
        <div class="chanye-tankuang-text" v-if="dataItem[6]"> {{dataItem[6]}} </div>
      </div>
    </div> 
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: [Array, String],
      required: true
    },
  },
  data () {
    return {
      timer: null,
      dataItem: {},
      showItem: false
    }
  },
  mounted (){
    // this.rolling(200)
  },
  methods: {
    rolling(ntime){
      const parent= this.$refs.parent
      this.timer = setInterval(()=>{
        if(parent.scrollTop + parent.clientHeight >= parent.scrollHeight ){
          parent.scrollTop = 0;
        }else{
          parent.scrollTop += 2;
        }
      },ntime)
    },
    enter(item){
      // if (this.timer) {
        if(item.allData){
          this.dataItem = item.allData
          // console.log(this.dataItem)
        }
        this.showItem = true
        // clearInterval(this.timer);
        // this.initInterval = null;
      // }
    },
    leave(){
      this.showItem = false
      if (this.initInterval) {
        
        return 
      }
      // this.rolling(200)
    },
    handleClick(item){
      if(item.allData){
        let name = item.name
        if(name){
          // console.log(this.$store.state.jinghe_companyName,' --> ',name)
          this.$store.commit('setJinghe',name)
        }

      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.tabList2{
  width 100%;
  max-height: 334px;
  font-family: SourceHanSansCN-Regular !important;

  overflow-y: auto;
  .tabList-title{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width 100%;
    border-radius: var(--radius,0) !important;
    height 29px;
    border-radius 2px;
    background rgba(86, 147, 255, 0.3);
    display flex;
    justify-content space-around;
    margin-bottom 9px;
    padding: 0 10px 0 10px;
    cursor: pointer;
    .title-item{

      font-size 17px;
      font-family Source Han Sans CN;
      font-weight 400;
      line-height 33px;
      color #C1E2FF
      // width 80px;
      text-align:center;
      // display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 29px;
      line-height: 29px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      white-space: nowrap;
      &:nth-child(1){
        color #DFF8FF;
        text-align: left;
        width: var(--width1);
        // margin-right: 10px;
      }
      &:nth-child(2){
        text-align: var(--center);
        width: var(--width2, 80px);
        padding-left: var(--padding,11px);
        // width: var(--width2, 80px);
      }
      &:nth-child(3){
        width var(--width2, 85px);
        color: var(--color)
        padding-right: var(--padding,11px);

      }
      &:nth-child(4){
        width var(--width2,64px);
        // color: var(--color)
      }
      .icon{
        width 19px;
        height 16px;
        vertical-align: middle;
      }
    }
  }
}
::-webkit-scrollbar{
    width: 7px;
    height: 16px;
  }
  ::-webkit-scrollbar-thumb
  {
    background-color: #2D9DFF;
    height: 35px;
    width 5px;
  }
  ::-webkit-scrollbar-track{
    border 1px solid #2D9DFF;
  }
.chanye-tankuang{
  position absolute;
  width 160px;
  // height 180px;
  padding 13px 8px;
  background rgba(3,16,38,1);
  top 30px;
  left -190px;
  z-index 9999999;
  p{
    font-size 15px;
    font-family Source Han Sans CN;
    font-weight bold;
    color #04CDF4;
    margin 0 0 3px 0;
    padding 0;
  }
  .chanye-tankuang-text{
    font-size 15px;
    font-family Source Han Sans CN;
    font-weight 400;
    color #E0EDF9;
    margin-bottom 5px;
  }
}
</style>